<!--test.vue-->
<template>
  <div style="width: 100%;height:100%" ref="echartsBox">
    <v-chart ref="echarts" class="chart" :option="option" :key="key" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "arcBarChart",
  props: {
    barOptions: {
      type: Object,
      default: () => {
        const Obj = {
          angleAxis: {
            show: false,
            splitLine: {
              show: false
            }
          },
          radiusAxis: {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六"],
            z: 10
          },
          polar: {},
          series: [
            {
              type: "bar",
              data: [5, 12, 30, 40,33,11],
			  itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 1, 1, 1,
                    [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ]
                )
            },
              coordinateSystem: "polar",
              name: "A",
              stack: "a",
              emphasis: {
                focus: "series"
              }
            }
          ]
        };
        return Obj;
      }
    }
  },
  watch: {
    barOptions: {
      handler(val) {
        console.log("barOptions", val);
        this.option = val;
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      option: {},
      key: 1
    };
  },
  mounted() {
    let MutationObserver =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    let element = this.$refs['echartsBox']
    this.observer = new MutationObserver(mutationList => {
      for (let mutation of mutationList) {
        console.log(mutation);
      }
      console.log("自适应");
      // this.$refs['echarts'].resize()
      this.key += 1;
    });
    this.observer.observe(element, {
      attributes: true,
      attributeFilter: ["style"],
      attributeOldValue: true
    });
  },
  beforeDestroyed() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer.takeRecords();
      this.observer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
